<template>
  <div class="app-container">
    <div class="demo-input-size" style="margin-bottom: 4px;">
      <el-input placeholder="请输托运单号"  prefix-icon="el-icon-search" v-model="seachData.oddNumber" :style="{width: '13%'}"> </el-input>

      <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="enterInfo()">物流信息录入</el-button>
    </div>
    <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column type="selection" width="55">
      </el-table-column>
    
      <el-table-column label="托运单号">
        <template slot-scope="scope">
          {{scope.row.oddNumber}}
        </template>
      </el-table-column>
      <el-table-column label="寄件地">
        <template slot-scope="scope">
          <span>{{scope.row.shippingAddr}}</span>
        </template>
      </el-table-column>
      <el-table-column label="寄件单位联系人">
        <template slot-scope="scope">
          <span>{{scope.row.unitName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="寄件单位联系人手机">
        <template slot-scope="scope">
          <span>{{scope.row.unitPhone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的地">
        <template slot-scope="scope">
          <span>{{scope.row.dest}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收件人">
        <template slot-scope="scope">
          <span>{{scope.row.receiver}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收件人地址">
        <template slot-scope="scope">
          <span>{{scope.row.receiverAddr}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收件人手机">
        <template slot-scope="scope">
          <span>{{scope.row.receiverPhone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="物品名称">
        <template slot-scope="scope">
          <span>{{scope.row.goodsName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="件数">
        <template slot-scope="scope">
          <span>{{scope.row.numbered}}</span>
        </template>
      </el-table-column>
      <el-table-column label="重量">
        <template slot-scope="scope">
          <span>{{scope.row.weight}}</span>
        </template>
      </el-table-column>
      <el-table-column label="预计到达时间">
        <template slot-scope="scope">
          <span>{{scope.row.updateDelay}}</span>
        </template>
      </el-table-column>
      <el-table-column label="运输合作单位">
        <template slot-scope="scope">
          <span>{{scope.row.clearAiUnits}}</span>
        </template>
      </el-table-column>
      <el-table-column label="合作单位托运号">
        <template slot-scope="scope">
          <span>{{scope.row.unitsOddNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column label="路由信息">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.routingInfo}}</span> -->
          <el-button @click="queryRoute(scope.row.id,scope.row.oddNumber)">查看路由</el-button>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <span>{{scope.row.remark}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.createDate)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="更新时间">
        <template slot-scope="scope">
          <span >{{parseTime(scope.row.updateTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row,'edit')">编辑</el-button>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row,'del')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 4px;">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        :total="pageTotal"
        @current-change="pageChange">
      </el-pagination>
    </div>

    <!--增加 路由信息弹窗-->
     <el-dialog :title="dialogFormTitle" :visible.sync="authVisible">
      <el-form :model="form">
        <!-- <el-form-item label="系统单号" :label-width="formLabelWidth">
          <el-select v-model="form.orderNo" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="托运单号" :label-width="formLabelWidth">
          <el-input v-model="form.oddNumber" ></el-input>
        </el-form-item>
        <el-form-item label="寄件地" :label-width="formLabelWidth">
          <el-input v-model="form.shippingAddr" ></el-input>
        </el-form-item>
        <el-form-item label="寄件单位联系人" :label-width="formLabelWidth">
          <el-input v-model="form.unitName" ></el-input>
        </el-form-item>
        <el-form-item label="单位联系人手机" :label-width="formLabelWidth">
          <el-input v-model="form.unitPhone"></el-input>
        </el-form-item>
        <el-form-item label="目的地" :label-width="formLabelWidth">
          <el-input v-model="form.dest"></el-input>
        </el-form-item>
        <el-form-item label="收件人" :label-width="formLabelWidth">
          <el-input v-model="form.receiver"></el-input>
        </el-form-item>
        <el-form-item label="收件人手机" :label-width="formLabelWidth">
          <el-input v-model="form.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址" :label-width="formLabelWidth">
          <el-input v-model="form.receiverAddr"></el-input>
        </el-form-item>
        <el-form-item label="件数" :label-width="formLabelWidth">
          <el-input v-model="form.numbered"></el-input>
        </el-form-item>
        <el-form-item label="重量" :label-width="formLabelWidth">
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
        <el-form-item label="运输方式" :label-width="formLabelWidth">
          <el-input v-model="form.transport"></el-input>
        </el-form-item>
        <el-form-item label="预计到达日期" :label-width="formLabelWidth">
          
          <el-date-picker v-model="form.updateDelay" type="date" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="运输合作单位" :label-width="formLabelWidth">
          <el-input v-model="form.clearAiUnits"></el-input>
        </el-form-item>
        <el-form-item label="合作单位托运单号" :label-width="formLabelWidth">
          <el-input v-model="form.unitsOddNumber"></el-input>
        </el-form-item>
        <el-form-item label="路由信息" :label-width="formLabelWidth">
          <el-input v-model="form.routingInfo" placeholder="请填写路由信息" type="textarea" rows="5"></el-input>
        </el-form-item>

      </el-form>
     
      <div slot="footer" class="dialog-footer">
        <el-button @click="authVisible = false;cancel()">取 消</el-button>
        <el-button type="primary" @click="saveRectipt()">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看 路由信息弹窗-->
        <el-dialog
          :visible.sync="logisticsVisible"
          title="物流信息"
          width="50%">
        <div v-if="logisticsInfo.length">
          <el-timeline style="margin-left:30px;" >
            <el-timeline-item
                v-for="(item, index) in logisticsInfo"
                :key="index"
                :timestamp="parseTime(item.tranTime)"
                >
               
              <span>
                <el-input v-model="item.status" placeholder="请填写状态信息" :readonly="!isButtonVisible"></el-input>
                <el-input v-model="item.addr" placeholder="请填写地址信息" :readonly="!isButtonVisible"></el-input>
                 <!-- <span>{{item.status}} &nbsp;&nbsp;</span><br/> -->
                <!-- <span>{{parseTime(item.tranTime)}}&nbsp;&nbsp;</span><br/>  placement="top" -->
               <!-- <span>{{item.addr}}</span><br/> -->
               <el-button v-show="isButtonVisible" type="primary" @click="updateRout(item)">确 定</el-button>
              </span>
            </el-timeline-item>
          </el-timeline>
          
        </div>
        <div v-else>
          暂无物流信息
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editRout()">编 辑</el-button>
          <el-button @click="logisticsVisible = false;isButtonVisible=false">关闭</el-button>
        </span>
        
      </el-dialog>
    <!-- 路由信息弹窗-->
    <el-dialog title="路由信息" :visible.sync="dialogFormVisible" width="50%">
      <el-form :model="form">
        <el-form-item label="托运单号" :label-width="formLabelWidth">
          <el-input v-model="form.oddNumber" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="寄件地" :label-width="formLabelWidth">
          <el-input v-model="form.shippingAddr" ></el-input>
        </el-form-item>
        <el-form-item label="寄件单位联系人" :label-width="formLabelWidth">
          <el-input v-model="form.unitName" ></el-input>
        </el-form-item>
        <el-form-item label="单位联系人手机" :label-width="formLabelWidth">
          <el-input v-model="form.unitPhone"></el-input>
        </el-form-item>
        <el-form-item label="目的地" :label-width="formLabelWidth">
          <el-input v-model="form.dest"></el-input>
        </el-form-item>
        <el-form-item label="收件人" :label-width="formLabelWidth">
          <el-input v-model="form.receiver"></el-input>
        </el-form-item>
        <el-form-item label="收件人手机" :label-width="formLabelWidth">
          <el-input v-model="form.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址" :label-width="formLabelWidth">
          <el-input v-model="form.receiverAddr"></el-input>
        </el-form-item>
        <el-form-item label="件数" :label-width="formLabelWidth">
          <el-input v-model="form.numbered"></el-input>
        </el-form-item>
        <el-form-item label="重量" :label-width="formLabelWidth">
          <el-input v-model="form.weight"></el-input>
        </el-form-item>
        <el-form-item label="预计到达日期" :label-width="formLabelWidth">         
          <el-date-picker v-model="form.updateDelay" type="date" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="运输合作单位" :label-width="formLabelWidth">
          <el-input v-model="form.clearAiUnits"></el-input>
        </el-form-item>
        <el-form-item label="合作单位托运单号" :label-width="formLabelWidth">
          <el-input v-model="form.unitsOddNumber"></el-input>
        </el-form-item>
        <el-form-item label="运输方式" :label-width="formLabelWidth">
          <el-input v-model="form.transport"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="路由信息" :label-width="formLabelWidth">
          <el-input v-model="form.routingInfo" placeholder="请填写路由信息" type="textarea" rows="5"></el-input>
        </el-form-item>

      </el-form>
     
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false;cancel()">取 消</el-button>
        <el-button type="primary" @click="saveRectipt()">更 新</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import { rectiptApi } from '@/api/userRectipt'
  import {parseTime} from '@/utils/index'

  export default {
    
    data() {
      return {
        pageNum: 1, // 当前页
        pageSize: 20, // 每页数
        pageTotal: 0, // 总页数
        list: null,
        listLoading: true,
        dialogFormVisible: false,
        dialogFormTitle: '',
        formLabelWidth: '100px',
        form: {
          infosList:[]
        },
        routForm:{},
        routData:[
          {status: '', addr: '', tranTime: ''}
        ],
        codeDisabled: true,
        recriptId:null,
        authVisible: false,
        bigImgVisible: false,
        routVisible: false,
        logisticsVisible:false,
        logisticsIndx:0,
        logisticsInfo:[],
        seachData: {
          oddNumber: '',
          payTime: null
        },
        options: [],
        value: '',
        dialogFormVisible: false,
        isButtonVisible: false,
      }
    },
    filters: {
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        const data = {}
        if (this.seachData.payTime != null) {
          data.startTime = this.seachData.payTime[0]
          data.endTime = this.seachData.payTime[1]
          data.message = "";
        }
        rectiptApi.getList(this.pageNum, this.pageSize, "").then(response => {
          console.log(response)
          this.list = response.list
          this.listLoading = false
          this.pageTotal = response.total
          this.pageNum = response.pageNum
        })

      },
      search() {
        const data = {};
        data.message = this.seachData.oddNumber;
        rectiptApi.getList(this.pageNum, this.pageSize,data.message).then(response => {
          console.log(response)
          this.list = response.list
          this.listLoading = false
          this.pageTotal = response.total
          this.pageNum = response.pageNum
        })
      },
      
      queryRoute(id,orderNo) {
        rectiptApi.getRouthList(orderNo,'', {}).then(response => {
          console.log(response)
          this.logisticsInfo = response.data
          this.recriptId = id;
          console.log("recriptId=",this.recriptId)
          this.logisticsVisible = true
          response.data.forEach(item => {
              this.logisticsIndx += 1;
              this.logisticsInfo.push({id:indx,status:item.status,addr:item.addr,tranTime:parseTime(item.tranTime)});
          })
         
          this.routData = [];
          this.routData.push({id:this.logisticsIndx+1,status: '', addr: '', tranTime: ''});
        }).catch((error) => {
           console.log(error.message);
        })
      },
      
      //取消
      cancel() {
        this.authVisible = false;
        // this.routVisible = false;
        this.routData = [{id:this.logisticsIndx+1,status: '', addr: '', tranTime: ''}];
      },
      enterInfo(){
        this.codeDisabled = true
        this.dialogFormTitle = '信息录入'
        this.authVisible = true
        this.form = {}
      },
      handleEdit(index, row, type) {
        this.form = row
        this.form.handStr="update";
        if(type=='edit'){
          this.codeDisabled = true
          this.dialogFormTitle = '编辑'
          this.dialogFormVisible = true
        }else if(type=='del'){
          this.$confirm('确认删除该条记录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            rectiptApi.del(row.id).then(response => {
              this.$message({
                type:'success',
                message: '删除成功!'
              });
              this.fetchData()
            })
          });
        }
      },
      //保存物流信息
      saveRectipt(){
        console.log(this.form)
        this.form.infosList = this.routData;
        if(this.form.routingInfo==undefined || this.form.routingInfo.length <=0){
              this.$message({
                type: 'info',
                message: '请填写路由信息'
              })
              return false;
          }
          this.form.remark = "信息录入";
          rectiptApi.saveRectipt(this.form).then(response => {
            this.authVisible = false
            this.dialogFormVisible = false
            this.fetchData()
            if(response.message!=undefined){
              this.$message({
                type: 'info',
                message: response.message
              })
            } else {
              this.$message({
              type: 'success',
              message: '录入成功'
            })
            this.fetchData()
          }
        })    
       
      },
      editRout(){
        this.isButtonVisible = true;
      },
      updateRout(obj){
        const data = {"id": obj.id,"status": obj.status,"addr": obj.addr,"tranTime": obj.tranTime}
        obj.createDate = parseTime(obj.createDate)
        obj.updateDate = parseTime(new Date())
        rectiptApi.updateRout(obj).then(response => {
          console.log(response)
          this.isButtonVisible = false;
        }).catch((error) => {
           console.log(error.message);
        })
      },
      //更新备注
      updateNotes(){
        // console.log(this.form)
        // orderApi.updateNotes(this.form).then(response => {
        //   this.authVisible = false
        //   this.dialogFormVisible = false
        //   this.fetchData()
        // })
      },
      pageChange(val) {
        this.pageNum = val
        this.fetchData()
      },
      //时间格式化
      parseTime(time) {
        if(time == null) return null;
        return parseTime(time, null)
      }
    }
  }
</script>
